<!-- 带边框和斑马纹的固定表头表格 -->
<template>
  <div class="table-demo">
    <h2>2. 添加表头固定功能,带边框和斑马纹的固定表头表格</h2>
    <p class="description">使用 border 和 stripe 属性美化固定表头表格</p>
    
    <div class="table-container">
      <Table
        :data="customers"
        :columns="columns"
        fixed-header
        fixed-header-height="300px"
        stripe
        border
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

const customers = ref([
  { id: 1, name: '张三', age: 28, city: '北京', level: '黄金' },
  { id: 2, name: '李四', age: 35, city: '上海', level: '白银' },
  { id: 3, name: '王五', age: 42, city: '广州', level: '铂金' },
  { id: 4, name: '赵六', age: 31, city: '深圳', level: '黄金' },
  { id: 5, name: '钱七', age: 29, city: '杭州', level: '白银' },
  { id: 6, name: '孙八', age: 45, city: '成都', level: '钻石' },
  { id: 7, name: '周九', age: 33, city: '武汉', level: '黄金' },
  { id: 8, name: '吴十', age: 38, city: '南京', level: '铂金' }
])

const columns = ref([
  { title: '姓名', dataIndex: 'name', width: '120px' },
  { title: '年龄', dataIndex: 'age', width: '80px' },
  { title: '城市', dataIndex: 'city', width: '120px' },
  { title: '会员等级', dataIndex: 'level', width: '120px' }
])
</script>

<style scoped>
.table-demo {
  padding: 20px;
}

.description {
  margin: 16px 0;
  color: #333;
  font-weight: 500;
}

.table-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  height: 400px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

:deep(.table-container) {
  height: 300px;
}

:deep(.body-container) {
  padding-top: 41px;
  width: calc(100% + 17px); /* 补偿滚动条宽度 */
}

:deep(.fixed-header-container) {
  background: white;
  z-index: 10;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

/* 表格布局固定 */
:deep(.header-table),
:deep(.body-table) {
  table-layout: fixed;
  width: 100%;
}

/* 确保列宽一致 */
:deep(.header-table colgroup),
:deep(.body-table colgroup) {
  display: table-column-group;
}

/* 调整滚动条样式 */
:deep(.body-container::-webkit-scrollbar) {
  width: 17px;
}

:deep(.body-container::-webkit-scrollbar-track) {
  background: #f1f1f1;
}

:deep(.body-container::-webkit-scrollbar-thumb) {
  background: #c1c1c1;
  border: 4px solid #f1f1f1;
  border-radius: 10px;
}

/* 表头样式增强 */
:deep(th) {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%) !important;
  color: #606266;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px solid #dcdfe6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 斑马纹样式增强 */
:deep(.stripe-row) {
  background-color: #f0f7ff;
}

/* 边框样式增强 */
:deep(th), :deep(td) {
  border-right: 1px solid #ebeef5;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

:deep(th:last-child), :deep(td:last-child) {
  border-right: none;
}

/* 悬停效果 */
:deep(tr:hover:not(.stripe-row)) {
  background-color: #ecf5ff;
  transform: translateZ(0);
}

:deep(tr.stripe-row:hover) {
  background-color: #e6f0fc;
  transform: translateZ(0);
}

/* 单元格样式 */
:deep(td) {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

/* 表格整体样式 */
:deep(.ds-table) {
  background-color: #ffffff;
  border: 2px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

/* 会员等级样式 */
:deep(td:last-child) {
  font-weight: 600;
}

:deep(td:last-child:contains('黄金')) {
  color: #f0b90b;
}

:deep(td:last-child:contains('白银')) {
  color: #8c8c8c;
}

:deep(td:last-child:contains('铂金')) {
  color: #40a9ff;
}

:deep(td:last-child:contains('钻石')) {
  color: #722ed1;
}
</style>
